<template>
	<view class="main">
		<view class="main-content" v-if="type === 1">
			<view class="content" @click="login">
				授权登录
			</view>
			<view class="deal">
				登录即代表<text class="agree">同意用户协议</text>
			</view>
		</view>
		<view class="main-content" v-if="type === 2">
			<!-- 绑定手机号 -->
			<button class="content" open-type='getPhoneNumber' @getphonenumber="phone">
				请绑定手机号
			</button>
		</view>
		<tui-tips ref="toast" backgroundColor="#19be6b"></tui-tips>
	</view>
</template>

<script>
	import {
		loginCode,
		getToken,
		postPhone
	} from '@/request/api'
	export default {
		data() {
			return {
				userInfo: {},
				type: 1,
				token:''
			};
		},
		methods: {
			// 消息提示
			toast(content) {
				let options = {
					msg: content,
					duration: 2000
				};
				this.$refs.toast.showTips(options);
			},
			login() {
				//获取用户登录的code值
				uni.login({
					success: async (res) => {
						const {
							code
						} = res
						// 利用登录的状态码获取openid
						const id = await loginCode({
							code
						})
						const openid = id.data.data.openid
						this.userInfo = {
							...this.userInfo,
							openid
						}
					}
				})
				//获取用户信息
				uni.getUserProfile({
					desc: '获取用心登录信息',
					success: async (res) => {
						const {
							encryptedData,
							rawData,
							signature,
							iv
						} = res
						this.userInfo = {
							...this.userInfo,
							encryptedData,
							rawData,
							signature,
							iv
						}
						const data = await getToken(this.userInfo)
						console.log(data)
						//要是返回失败的话就说明没有绑定手机号，那就显示绑定手机号的结构代码，进行绑定的操作
						if (data.data.message === '失败') {
							this.type = 2
							return
						}
						//返回成功的话就是有token值，直接存到本地存储，然后跳转回details.vue课程列表页面
						uni.setStorageSync('mytoken',data.data.data.token)
						this.toast('授权成功')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
							},1000)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//小程序手机号登录，执行了这步就可以拿到token值
			async phone(v) {

				const {iv,encryptedData} = v.detail
				const res = await postPhone({
					openid: this.userInfo.openid,
					iv: iv,
					encryptedData:encryptedData,
					userInfo:{
						encryptedData:this.userInfo.encryptedData,
						iv:this.userInfo.iv,
						rawData:this.userInfo.rawData,
						signature:this.userInfo.signature
					}
				})
				// this.token = res.data.data.token
				//手机号绑定成功
				if(res.data === 0){
					this.toast('绑定成功')
					setTimeout(()=>{
						uni.navigateBack({
							delta:2
						})
					},1000)
				}
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.main-content {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.content {
				width: 80%;
				// height: 60rpx;
				padding: 20rpx 0;
				color: #fff;
				border-radius: 60rpx;
				background-color: #28a4f3;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.deal {
				margin-top: 20rpx;

				.agree {
					color: #28a4f3;
				}
			}
		}
	}
</style>
